<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gqgy="http://www.thymeleaf.org/extras/gqgl"
>
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{organ.info}"></title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12-197;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-72 - 44 - 209; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            $("body").css("height",$(document).height() + "px");
            loadLeftTree();
            $("ul#tab-ul-menu-id>li").click(function (event) {
                event.stopPropagation()
                $(this).parent().find("a").removeClass("active");
                $(this).find("a").addClass("active");
                $("#tab-content-id > article").removeClass("in");
                $("#tab-content-id > article").removeClass("active");
                var tabId = $(this).attr("tab");
                $("#" + tabId).addClass("in");
                $("#" + tabId).addClass("active");


            });
            $("ul#tab-ul-menu-id>li:nth-child(1)").click();

            var _columnWidth = _gridWidth/6;
            $("#flexigrid-id2").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{queryOrganInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'id',name : 'id',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{organ.search.id}]]*/"",name : 'id',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{organ.search.name}]]*/"",name : 'name',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{organ.search.organName}]]*/"",name : 'organName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{organ.search.pName}]]*/"",name : 'pName',width : _columnWidth, sortable : true,align : 'center'}

                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : false, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : false, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });

            var _columnWidth = _gridWidth/6;
            $("#flexigrid-id1").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{queryOrganInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'id',name : 'id',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{organ.search.id}]]*/"",name : 'id',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{organ.search.name}]]*/"",name : 'name',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{organ.search.organName}]]*/"",name : 'organName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{organ.search.pName}]]*/"",name : 'pName',width : _columnWidth, sortable : true,align : 'center'}

                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : false, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : false, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });

            var _columnWidth = _gridWidth/6;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{queryOrganInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'id',name : 'id',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{organ.search.id}]]*/"",name : 'id',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{organ.search.name}]]*/"",name : 'name',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{organ.search.organName}]]*/"",name : 'organName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{organ.search.pName}]]*/"",name : 'pName',width : _columnWidth, sortable : true,align : 'center'}

                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : false, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : false, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });


            <!-- 绑定-->
            $("#bind-btn-id").click(function (event) {
                event.stopPropagation()
                $("#bind-organ-form-id").resetForm();
                $("#bind-organ-dialog-id").dialog('open')
            })

            $("#bind-organ-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{organ.bind}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $("#bind-organ-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#bind-organ-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#bind-organ-dialog-id").dialog('close');
                    treeFresh();
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });



            //
            $("#bound-menu-diaolog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{common.bound}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var menuId = $("#menu-id").text();
                            var parentId = "";
                            var ztreeObj = $.fn.zTree.getZTreeObj("bound-menu-tree-id");
                            var checkNodes = ztreeObj.getCheckedNodes(true);
                            var menuArray = [];
                            $(checkNodes).each(function (index,item) {
                                parentId = item.id;
                            });

                            if(parentId === ''){
                                message(/*[[#{common.select}]]*/"");
                                return;
                            }
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{saveParentIdByMenuId}]]*/'',
                                data: [{name:"menuId",value:menuId},
                                    {name:"parentId",value:parentId}],
                                success: function (data) {
                                    // console.info(data)
                                    loadLeftTree();
                                    $("#bound-menu-diaolog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#bound-btn-id").click(function (evnet) {
                evnet.stopPropagation();
                // $("#bound-menu-diaolog-id").dialog('open');
                boundTree();
            })

            $("#unbound-btn-id").click(function (event) {
                event.stopPropagation();
                var organUuidVal =  organUuid.value;
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{unBoundOrgan}]]*/'',
                    data: [
                        {name:"organUuid",value:organUuidVal}
                    ],
                    success: function (data) {
                        message(data.msg);
                        loadLeftTree();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                })
            })

            // 删除
            $("#delete-btn-id").click(function (event) {
                event.stopPropagation();
                var organUuidVal =  organUuid.value;
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{deleteOrganInfoByMenuId}]]*/'',
                    data: [
                        {name:"organUuid",value:organUuidVal}
                    ],
                    success: function (data) {
                        message(data.msg);
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                })
            })



        });//ready
        function query(menuId) {
            var organType=3;
            var organUuid = menuId;
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"organType",value:organType},
                    {name:"organUuid",value:organUuid}
                ]
            }).flexReload();
        }

        function query1(menuId) {
            var organType=1;
            var organUuid = menuId;
            $("#flexigrid-id1").flexOptions({
                extParam:[
                    {name:"organType",value:organType},
                    {name:"organUuid",value:organUuid}
                ]
            }).flexReload();
        }

        function query2(menuId) {
            var organType=2;
            var organUuid = menuId;
            $("#flexigrid-id2").flexOptions({
                extParam:[
                    {name:"organType",value:organType},
                    {name:"organUuid",value:organUuid}
                ]
            }).flexReload();
        }


        var leftSetting = {
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback:{
                onClick:onClickNode
            }
        };

        function loadLeftTree() {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url : /*[[@{getAllOrgan}]]*/"",
                data: [],
                success: function (data) {
                    // console.info(data)
                    $.fn.zTree.init($("#left-tree-id"), leftSetting, data);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });


        }

        function onClickNode(event, treeId, treeNode) {
            var menuId = treeNode.id;
            $("#menu-id").text(menuId);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{queryOrganListById}]]*/'',
                data: [{name:"organUuid",value:menuId}],
                success: function (data) {
                    console.info(data)
                    $("#organUuid").val(data.organUuid);
                    $("#organName").val(data.organName);
                    $("#parentUuid").val(data.parentUuid);
                    $("#description").val(data.description);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
            query(menuId);
            query1(menuId);
            query2(menuId);
        }


        // 组织新增
        function addOrganInfo() {
            var organUuidVal =  organUuid.value;
            var organNameVal =  organName.value;
            var parentUuidVal =  parentUuid.value;
            var descriptionVal =  description.value;

            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{addOrganInfo}]]*/'',
                data: [
                    {name:"organUuid",value:organUuidVal},
                    {name:"organName",value:organNameVal},
                    {name:"parentUuid",value:parentUuidVal},
                    {name:"description",value:descriptionVal}
                ],
                success: function (data) {
                    message(data.msg)
                    queryI18n(menuId);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        // 组织修改
        function updateOrganInfo() {
            var organUuidVal =  organUuid.value;
            var organNameVal =  organName.value;
            var parentUuidVal =  parentUuid.value;
            var descriptionVal =  description.value;

            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{updateOrganInfo}]]*/'',
                data: [
                    {name:"organUuid",value:organUuidVal},
                    {name:"organName",value:organNameVal},
                    {name:"parentUuid",value:parentUuidVal},
                    {name:"description",value:descriptionVal}
                ],
                success: function (data) {
                    message(data.msg)
                    queryI18n(menuId);
                    // console.info(data)

                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }


    </script>
    <style>
        .form-group{
            margin: 0 10px;
        }
        .gqgl-tb-th{
            height: 32px;
            background-color: #b5b5b5;
            background: #f5f5f5;
            border-top: #d4d4d4 1px solid;
            background-color: #fff;
        }
        .gqgl-tb-th > th{
            font-weight: normal;
            cursor: default;
            white-space: nowrap;
            overflow: hidden;
            text-align: center;
            vertical-align: middle !important;
            padding: 0px;
            height: 32px;
            background-color: #b5b5b5;
            box-sizing: border-box;
            color: #FFF;
            font-size: 12px;
        }

        .table-edit-data td{
            text-align: center;
            vertical-align: middle !important;
            padding: 0px;
            height: 32px;
            font-size: 12px;
            background-color: #f5f5f5;
        }
        .table-erow td{
            background-color: #ededed;
        }
        .table-edit-data .read{
            display: inline-block;
            margin-right: 10px;
        }
        .table-edit-data .edit{
            display: none;
        }
        .table-edit-tr .edit{
            display: inline-block;
        }
        .table-edit-tr .read{
            display: none;
        }
         body{
             background-color: #E6E6FA
         }

    </style>
</head>
<body style="display: flex;flex-direction: row">
<div style="flex-basis: 192px;background-color: #99bbe8;overflow:scroll;">
    <ul id="left-tree-id"  class="ztree" >

    </ul>
</div>

<div style="flex-grow: 1;display: flex;flex-direction: column;">
    <nav style="flex-basis: 30px;margin-top: 10px;">
        <a id="bind-btn-id" href="#" class="navbar-btn btn">
            <i class="glyphicon glyphicon-link"></i>
            <span th:text="#{common.bound}"></span>
        </a>
        <a id="unbound-btn-id" href="#" class="navbar-btn">
            <i class="glyphicon glyphicon-paperclip"></i>
            <span th:text="#{common.unbound}"></span>
        </a>
        <a id="delete-btn-id" href="#" class="navbar-btn">
            <i class="glyphicon glyphicon-trash"></i>
            <span th:text="#{common.delete}"></span>
        </a>
        <a id="add-btn-id" href="#" class="navbar-btn" onclick="addOrganInfo();">
            <i class="glyphicon glyphicon-plus-sign"></i>
            <span th:text="#{common.add}"></span>
        </a>
        <a id="update-btn-id" href="#" class="navbar-btn" onclick="updateOrganInfo();">
            <i class="glyphicon glyphicon-floppy-disk"></i>
            <span th:text="#{common.modify}"></span>
        </a>

    </nav>
    <article style="flex-basis: 162px;">
        <form style="display: grid;grid-template-columns: auto auto auto">
            <div class="form-group">
                <span th:text="#{organ.id}"></span>
                <input class="form-control" id="organUuid" type="text" name="organUuid">
            </div>
            <div class="form-group">
                <span th:text="#{organ.name}"></span>
                <input class="form-control" id="organName" type="text" name="organName">
            </div>
            <div class="form-group">
                <span th:text="#{organ.parent.uuid}"></span>
                <input class="form-control" id="parentUuid" type="text" name="parentUuid">
            </div>
            <div class="form-group">
                <span th:text="#{organ.description}"></span>
                <input class="form-control" id="description" type="textarea" name="description">
            </div>
        </form>
    </article>
    <article style="flex-grow: 1;margin-top:10px;">
        <ul id="tab-ul-menu-id" class="nav nav-tabs">
            <li tab="tab-son-menu-id">
                <a href="#">
                    <i class="fa fa-th"></i>
                    <span th:text="#{organ.sub.organ}"></span>

                </a>
            </li>
            <li tab="tab-son-menu-id1">
                <a href="#">
                    <i class="fa fa-th"></i>
                    <span th:text="#{organ.duty}"></span>

                </a>
            </li>
            <li tab="tab-son-menu-id2">
                <a href="#">
                    <i class="fa fa-th"></i>
                    <span th:text="#{organ.department}"></span>

                </a>
            </li>
        </ul>

        <section id="tab-content-id" class="tab-content">
            <article id="tab-son-menu-id" class="tab-pane fade in active">
                <table id="flexigrid-id"></table>
            </article>
            <article id="tab-son-menu-id1" class="tab-pane fade">
                <table id="flexigrid-id1"></table>
            </article>
            <article id="tab-son-menu-id2" class="tab-pane fade">
                <table id="flexigrid-id2"></table>
            </article>
        </section>


    </article>

    </article>
</div>

<div id="bound-menu-diaolog-id" style="display: none">
    <ul id="bound-menu-tree-id" class="ztree">

    </ul>
</div>

<div id="bind-organ-dialog-id" style="display: none">
    <form id="bind-organ-form-id" th:action="@{organBind}" method="post">
        <div class="form-group">
            <span th:text="#{organ.current.id}"></span>
            <input class="form-control" id="modify-role-name-id" type="text" name="organCurrentName">
        </div>
        <div class="form-group">
            <span th:text="#{organ.parent.id}"></span>
            <input class="form-control" id="modify-role-remarks-id" type="text" name="organParentName">
        </div>
    </form>
</div>



</body>
</html>